<template>
  <div id='user'>

    <div class='breadcrumb-wrap'>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>系统管理</el-breadcrumb-item>
        <el-breadcrumb-item>部门管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class='option-wrap'>
      <el-button type="info" @click="dialogVisible.addUserVisible = true">新增部门
      </el-button>
    </div>
    <div class="gird-wrap">
      <el-table style="width: 100%" height="630" :border="true" :stripe="true" :data="departmentList">
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column prop='No' label="部门编号"></el-table-column>
        <el-table-column prop='name' label="部门名称"></el-table-column>
        <el-table-column prop='createTime' label="创建时间"></el-table-column>
        <el-table-column fixed="right" label="操作" width="140">
          <template scope="scope">
            <el-button @click="handleEdit(scope.row)" type="primary" size="small">
              修改</el-button>
            <el-button @click="deleteBtnClick(scope.row)" type="primary" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pager-wrap">
      <el-pagination :current-page="1" :page-size="10" :total="page.totalCount" layout="total, prev, pager, next">
      </el-pagination>
    </div>

    <el-dialog title="新增部门" v-model="dialogVisible.addUserVisible">
      <el-form ref="form" :model="addUserVo" label-width="120px">
        <el-form-item label="部门名称：">
          <el-input v-model="addUserVo.name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible.addUserVisible = false">取 消</el-button>
        <el-button type="primary" @click="addDepart">保 存</el-button>
      </div>
    </el-dialog>

    <!--修改-->
    <el-dialog title="修改部门名称" v-model="dialogVisible.editUserVisible">
      <el-form ref="form" :model="editUserVo" label-width="120px">
        <el-form-item label="部门名称：">
          <el-input v-model="editUserVo.name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible.addUserVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUserBtnClick">保 存</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import r from '../utils/RequestUtil';
  import wxs from '../utils/WxsService';
  export default {
    name: 'user_1',
    data: function () {
      return {
        message: '',
        departmentList: [],
        dialogVisible: {
          addUserVisible: false,
          updateUserVisible: false,
          editUserVisible: false
        },
        queryUserVo: {
          nickName: '',
          telephoneNo: '',
          roleType: ''
        },
        addUserVo: {
          name: '',
          No: '',
          createTime: '',
          status: '1', //'0':delete;
        },
        editDepaName: '',
        editUserVo: {
          name: '',
        },
        page: {
          totalCount: 0
        },
      }
    },
    methods: {
      queryBtnClick: function () { //查询部门
        this.departmentList = wxs.getDepartment();
        this.dialogVisible.addUserVisible = false;
      },
      //提交部门数据
      addDepart: function () {
        this.addUserVo.No = (Date.now()).toString();
        this.addUserVo.createTime = (new Date()).toLocaleString();
        if (this.addUserVo.name.trim() !== '' && this.addUserVo.name.trim() !== null && this.addUserVo.name.trim()
          .length > 0) {
          this.addUserVo.name.trim()
        } else {
          this.$message('部门不能为空');
          return;
        }
        wxs.addDepartment(this.addUserVo);
        this.addUserVo.name = '';
        this.addUserVo.No = '';
        this.addUserVo.createTime = '';
        this.dialogVisible.addUserVisible = false;
        setTimeout(() => {
          this.queryBtnClick();
        }, 100);
      },
      handleEdit(row) { //修改
        this.dialogVisible.editUserVisible = true;
        this.editUserVo = row;
        this.editDepaName = row.name;
      },
      editUserBtnClick() { //提交修改数据
        if (this.editUserVo.name.length > 0 && this.editDepaName !== this.editUserVo.name) {
          wxs.editDepartment(this.editUserVo, this.editUserVo.No);
        } else {
          return;
        }
        this.dialogVisible.editUserVisible = false;
        setTimeout(() => {
          this.queryBtnClick();
        }, 100);
      },
      deleteBtnClick: function (row) { //删除数据
        this.$confirm('确认删除部门？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then((info) => {
          wxs.deleteDepartment([row.No]);
          setTimeout(() => {
            this.queryBtnClick();
          }, 100);
        }).catch((err) => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    },
    mounted: function () {
      this.queryBtnClick();
    }
  }

</script>

<style></style>
